const pt = document.querySelector('.wear .phone-top-right');
const pc = document.querySelector('.wear .phone-content');

pt.addEventListener('mouseover', function(e) {
    if (e.target.tagName === 'A') {

        const activeElement = document.querySelector('.wear .phone-top-right .active');
        if (activeElement) {
            activeElement.classList.remove('active');
        }

        e.target.classList.add('active');

        const allBoxes = document.querySelector('.wear .phone-content .active');
        allBoxes.classList.remove('active')

        const targetBox = document.querySelectorAll('.wear .phone-content .phone-box')[parseInt(e.target.dataset.id)];
        if (targetBox) {
            targetBox.classList.add('active');
        }
    }
});
